<!-- 学院卡片组件 -->
<template>
	<a target="_blank" :href="url" style="display: block;">
	<div class="college">
		<div class="collegeCard">
			<div class="wrapper">
			<div class="college-pic" :style="{backgroundImage: 'url(' + img + ')', backgroundSize:'cover'}">
			</div>
			</div>
			<div class="infoBox">
				<div class="name"><span>{{name}}</span></div>
				<div class="desc"><span>{{desc}}</span></div>
				<div class="tagBox" > 
				<span  class="tag" v-for="(item,i) in tag" :key="i" >{{item}}</span>
				</div>
			</div>
		</div>	
	</div>
	</a>
</template>

<script>
	export default {
	  props: {
		  'img':String,
		  'name':String,
		  'desc':String,
		  'tag':Array,
		  'url':String
	  },
	  created() {
	  }
	}
</script>

<style scoped="scoped">
	.desbanner a{
		text-decoration:none !important;
	}
	.name {
		color: #333;
	}
	.college{
		width: 33.333333%;
		min-height: 463px;
		float: left;
		
	}
	.collegeCard{
		transition: box-shadow .2s;
		position: relative;
		width: 95%;
		height: 425px;
		margin: 0 auto;
		box-shadow: 0 1px 4px 1px rgba(0,0,0,.08);
		background: white;
	}
	.collegeCard .wrapper{
		border: 1px solid #d2d2d2;
		pointer-events: none;
		position: absolute;
		width: 97%;
		height: 230px;
		left: 1.2%;
		top: -2%;
		overflow: hidden;
	}
     .college :hover{
		box-shadow: 0 5px 20px 8px rgba(0,0,0,.1);
		transform:  scale(1.001,1.001);
		-webkit-transform:  scale(1.005, 1.005);
	}
	.college :hover .college-pic{

		transition:all .3s;
		-webkit-transform:  scale(1.15, 1.15);
		transform:  scale(1.15, 1.15);

	}
	.college  .college-pic{
	
		transition:all .3s;
		-webkit-transform:  scale(1, 1);
		transform:  scale(1, 1);
	
	}
		
	.college-pic{
		pointer-events: none;
		position: absolute;
		width: 100%;
		height: 230px;
		left: 0;
		top: 0;
	}
	.infoBox{
		pointer-events: none;
		position: absolute;
		width: 70%;
		height: 175px;
		bottom: 10px;
		left: 15%;
	}
    .infoBox .name{
		
	}
	.college :hover .name{
		color: #38ba9f;
	}
	.infoBox .desc{
		padding-top: 10px;
		color: #7f7f7f;
		font-size: 12px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 4;
		overflow: hidden;
		height: 66px;
	}
	.tagBox{
		margin-top: 20px;
	}
	.tag{
		display: inline-block;
		border-radius: 41px;
		padding: 4px 12px;
		background-color: #F0F0F0;
		color: #7F7F7F;
		width: auto;
		font-size: 12px;
		text-align: center;
		margin: 3px;
	}
</style>
